<template>
  <!--会签管理-我的审批-付款计划详情弹窗-表单-->
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="false" class="scroll-view" style="height: 600px">
      <a-form-model disabled ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="审批编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="approvNumber"
              style="margin-bottom: 10px;">
              <a-input :disabled="true" v-model="model.approvNumber" style="color: black;"
                placeholder="请输入介绍"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="提交时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="submitTime" style="margin-bottom: 10px;">
              <j-date
                v-model="model.submitTime"
                :disabled="true"
                :showTime="true"
                date-format="YYYY-MM-DD "
                style="width: 100%;"
                placeholder="请选择提交时间"
              ></j-date>
            </a-form-model-item>
          </a-col>
        </a-row>
        
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="发起人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userName" style="margin-bottom: 10px;">
              <a-input :disabled="true" v-model="model.userName" style="color: black;" placeholder="请输入发起人"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="职位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="post" style="margin-bottom: 10px;">
              <a-input :disabled="true" v-model="model.post" style="color: black;"  placeholder="请选择职位"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        
        <a-row>
          <a-col :span="12">
            <a-form-item label="申请部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="departId" style="margin-bottom: 10px;">
              <a-input :disabled="true" placeholder="请选择" style="color: black;"  :options="levelTwoOptions" v-model="model.departName"> </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status" style="margin-bottom: 10px;">
              <a-select :disabled="true" placeholder="请选择状态" style="color: black;" v-model="model.status">
                <!-- <a-select-option value="0">未提交</a-select-option> -->
                <a-select-option value="1">审核中</a-select-option>
                <a-select-option value="2">已同意</a-select-option>
                <a-select-option value="3">已驳回</a-select-option>
                <a-select-option value="4">已撤销</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="title" style="margin-bottom: 10px;">
              <a-input :disabled="true" v-model="model.title" style="color: black;" placeholder="请输入标题"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="对方名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="other" style="margin-bottom: 10px;">
              <a-input :disabled="true" v-model="model.other" style="color: black;" placeholder="请输入对方名称"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="项目" :labelCol="labelCol"  :wrapperCol="wrapperCol" prop="projectName" style="margin-bottom: 10px;">
              <a-select
                :disabled="true"
                style="color: black;"
                :options="levelOneOptions"
                placeholder="请选择项目"
                v-model="model.projectName"
              >
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="银行账号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bankAccount" style="margin-bottom: 10px;">
              <a-input :disabled="true" style="color: black;" v-model="model.bankAccount" placeholder=""></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="开户银行" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bankDeposit" style="margin-bottom: 10px;">
              <a-input :disabled="true" style="color: black;" v-model="model.bankDeposit" placeholder=""></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="付款项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="paymentProject" style="margin-bottom: 10px;">
              <a-input :disabled="true" style="color: black;" v-model="model.paymentProject" placeholder=""></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="付款金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="paymentMoney" style="margin-bottom: 10px;">
              <a-input :disabled="true" style="color: black;" v-model="model.paymentMoney" placeholder=""></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="合同编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contract" style="margin-bottom: 10px;">
              <a-input :disabled="true" style="color: black;" v-model="model.contract" placeholder=""></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        
         <a-row>
           <a-col :span="24">
             <a-form-model-item label="备注" :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="remark"
               style="margin-bottom: 10px;margin-left: 20px;">
               <textarea :disabled="true" v-model="model.remark" cols="100" rows="3" style="width: 93%;"></textarea>
             </a-form-model-item>
           </a-col>
         </a-row>
         
         <a-row>
           <a-col :span="12">
             <a-form-model-item label="审核状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status"
               style="margin-bottom: 10px;">
               <a-select placeholder="请选择审核状态" :disabled="true" style="color: black;" v-model="model.status">
                 <a-select-option value="0">待审核</a-select-option>
                 <a-select-option value="1">已同意</a-select-option>
                 <a-select-option value="2">已驳回</a-select-option>
                 <a-select-option value="3">已撤销</a-select-option>
               </a-select>
             </a-form-model-item>
           </a-col>
         </a-row>
         
         <a-row>
           <a-col :span="24">
             <a-form-model-item label="附件资料" :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="attachment"
               style="margin:0 60px 10px 20px;">
               <j-upload v-model="model.attachment" :disabled="disabled" :buttonVisible="!disabled"></j-upload>
             </a-form-model-item>
           </a-col>
         </a-row>
         </a-row>
         
         <a-row>
           <a-form-model-item label="审核流程" :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="remark"
             style="margin-bottom: 10px;margin-left: 20px;">
             <div style="display: flex;flex-direction: column;width: 100%;">
               <block v-for="(item, index) in list" :key="index">
                 <div style="display: flex;flex-direction: column;">
                   <div style="display: flex;align-items: center;">
                     <div style="width:60px;margin-right: 5px;">审批人{{index + 1 }} </div>
                     <div
                       style="border: 0.5px solid gray; width: 674px; padding: 0 5px;display: flex;align-items: center;"
                       :style="{background:((item.approver === approver)&&(item.status === '1')) && pageType ==='approver'?'#fff':'#f5f5f5'}">
                       {{ item.departName }} {{ item.realname }} 意见:<a-input
                         :disabled="((item.approver === approver)&&(item.status === '1')) && pageType ==='approver'?false:true "
                         v-model="item.feedback" placeholder=""
                         style="width: 500px;border: none;background: none;"></a-input>
                     </div>
                     <a-list placeholder="请选择状态" :data-source="list"
                       style="font-size: 16px; width: 80px; margin-left: 5px; display: inline-block">
                       <!-- <a-list-item v-if="item.status == '0'" style="color: blue">待审核</a-list-item> -->
                       <a-list-item v-if="item.status == '1'" style="color: blue">审核中</a-list-item>
                       <a-list-item v-if="item.status == '2'" style="color: green">已同意</a-list-item>
                       <a-list-item v-if="item.status == '3'" style="color: red">已驳回</a-list-item>
                       <a-list-item v-if="item.status == '4'" style="color: gray">已撤销</a-list-item>
                     </a-list>
                   </div>
                   <div style="margin-left: 65px;margin-bottom: 10px;width: 730px;">
                     <j-upload v-model="item.ideaAttachment"
                       :disabled="((item.approver === approver)&&(item.status === '1')&&(item.isAttachment === '1')) && pageType ==='approver'?false:true"
                       :buttonVisible="!(((item.approver === approver)&&(item.status === '1')&&(item.isAttachment === '1')) && pageType ==='approver'?false:true )"></j-upload>
                   </div>
                 </div>
               </block>
             </div>
           </a-form-model-item>
         </a-row>
         
         <a-row>
           <a-button v-if="!(pageType === 'approver'?false:true)"
             style="background: orange;color: white;border:1px solid orange;margin-left: 118px;"
             @click="handleOpen('history')">查看原审核记录</a-button>
         </a-row>
      </a-form-model>
    </j-form-container>
    <!-- <div style="width: 200px; height: 50px; margin-left: 550px; margin-top: 5px">
      <a-button @click="bohui" type="primary" style="color: white" v-if="this.status == '1'">驳回</a-button>
      <a-button @click="submit" type="primary" style="color: white; margin-left: 10px" v-if="this.status == '1'"
        >同意</a-button
      >
    </div> -->
    <j-modal
      class="modal-privacy"
      :title="title"
      :visible="visible1"
      :disableScreenClick="true"
      okText="确定"
      cancelText="取消"
      @cancel="cancelPrivacy"
      @ok="confirmPrivacy"
    >
      <textarea cols="70" rows="5" placeholder="请输入撤销原因"></textarea>

      <!-- <div style="font-size: 20px;width: 200px;height: 20px;margin: 0 auto;margin-top: 10px;">确定提交吗？</div> -->
    </j-modal>
    <wt-shishi-modal ref="modalForm"></wt-shishi-modal>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import WtShishiModal from './WtShishiModal'
// import { debug } from 'webpack'

export default {
  name: 'WtBrandForm',
  components: { WtShishiModal },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
    defaultModel:{
      type: Boolean,
      default(){
        return{}
      }
    },
  },
  data() {
    return {
      title: '撤销原因',
      model: {
        title: '',
        other: '',
        bankAccount: '',
        bankDeposit: '',
        paymentProject: '',
        paymentMoney: '',
        contract: '',
        remark: '',
        attachment: '',
        approvNumber: '',
        submitTime: '',
        status: '',
        projectName: '',
        userName: '',
        post: '',
      },
      model1: {
        feedback: '',
        id: '',
        status: '',
      },
      status: '',
      realname: '',
      visible1: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      departId: '',
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      labelCol2: {
        xs: {
          span: 24
        },
        sm: {
          span: 2
        },
      },
      wrapperCol2: {
        xs: {
          span: 24
        },
        sm: {
          span: 22
        },
      },
      confirmLoading: false,
      validatorRules: {},
      rules: {
        feedback: [
          {
            required: true,
            message: '请填写审批意见!',
          },
          { min: 1, max: 30, message: '长度在 2 到 30 个字符' },
        ],
      },
      levelOneOptions: [],
      levelTwoOptions: [],
      id: '',
      ids: [],
      idss: '', //提交id
      treeData: [],
      treeData1: [],
      treeData2: [],
      treeData3: [],

      list: [],
      fileList: [],
      queryParam: {
        countersignId: this.id,
      },
      url: {
        list: '/countersign/wtCountersignPaymentRequest/queryByCountersignId',
        add: '/wtBrand/add',
        edit: '/wtBrand/edit',
        approver:'/countersign/wtCountersignProcess/submitExamineApprove',
        queryById: '/wtBrand/queryById',
      },
      approver: '',
      pageType: '',
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
    if (!!window.localStorage.getItem("pro__Login_Userinfo")) {
      let userInfo = JSON.parse(window.localStorage.getItem("pro__Login_Userinfo")).value;
      this.approver = userInfo.id;
    }
    getAction(`/sys/sysDepart/getDepartByOrgType?orgType=1`).then((res) => {
      if (res.success) {
        this.treeData = []
        let treeList = res.result
        for (let a = 0; a < treeList.length; a++) {
          let temp = treeList[a]
          temp.isLeaf = temp.leaf
          this.treeData.push(temp)
        }

        this.levelOneOptions = [...this.treeData].map((v) => {
          return {
            ...v,
            value: v.id,
            label: v.departName,
          }
        })
      }
    })
    // getAction('/sys/sysDepart/getDepartListByParentId').then((res) => {
    //       if (res.success) {
    //         this.treeData2 = []
    //         let treeList2 = res.result
    //         // console.log('sewq',treeList2);
    //         for (let a = 0; a < treeList2.length; a++) {
    //           let temp = treeList2[a]
    //           temp.isLeaf = temp.leaf
    //           this.treeData2.push(temp)
    //           // console.log('dswq',this.treeData2);
    //           // this.model.departId = treeList2.id
    //         }
    //         this.levelTwoOptions = [...this.treeData2].map((v) => {
    //           return {
    //             ...v,
    //             value: v.id,
    //             label: v.departName,
    //           }
    //         })
    //       }
    //     })
  },
  mounted() {
    if(!!this.defaultModel.id){
      this.model = JSON.parse(JSON.stringify(this.defaultModel));
      this.list = this.model.list;
    }
  },
  methods: {
    confirmPrivacy() {
      // console.log('同意了用户协议')
      // console.log(this.privacyDialogShow)l
      this.visible1 = false
      // console.log(this.privacyDialogShow)
    },
    cancelPrivacy() {
      // console.log('拒绝了用户协议')
      this.visible1 = false
    },
    submitForm1: function (record) {
      this.$refs.modalForm.edit(record)
      this.$refs.modalForm.title = '新增'
      // this.$refs.modalForm.disableSubmit = true;
    },

    add() {
      this.edit(this.modelDefault)
    },
    edit(record,type) {
      if (!!type) {
        this.pageType = type;
      }
      // this.departId = record.departId
      this.visible = true
      // console.log('ewq',this.model.post);
      this.loadTree(record)
      // console.log('432',this.nickname());
      this.id = record.id
      this.status = record.status
    },
    loadTree(record) {
      // var that = this
      getAction(`/countersign/wtCountersignPaymentRequest/queryByCountersignId?countersignId=${record.id}`).then(
        (res) => {
          if (res.success) {
            this.treeData1 = res.result

            this.model = this.treeData1
            this.treeData3 = res.result.list
            this.list = res.result.list
            this.ids = this.list.find((obj) => obj.status == '1')
            // console.log('dwaq1', this.ids);
            this.idss = this.ids.id
            // console.log('dwaq1', this.idss);

            // that.model.id=that.treeData[0].id
          }
        }
      )
    },
    //查看原审核记录
    handleOpen(type) {
      this.$emit('handleOpen', type);
    },
    submitForm(record) {
      const that = this;
      // debugger
      let httpurl = '';
      let method = '';
      let params = {};
      if (this.pageType === 'approver') { //驳回/同意-审批
        httpurl = this.url.approver;
        method = 'POST';
        params.status = record;
        if (this.list && this.list.length > 0) {
          this.list.forEach(ite => {
            if (this.approver === ite.approver && ite.status === '1') {
              params.feedback = ite.feedback;
              params.ideaAttachment = ite.ideaAttachment;
              params.id = ite.id;
            }
          })
        }
      }
    
      if (!params.feedback) {
        that.$message.warning('审批意见不能为空,请填写')
      } else {
        that.confirmLoading = true
        httpAction(httpurl, params, method)
          .then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          })
          .finally(() => {
            that.confirmLoading = false
          })
      }
    },
    
  },
}
</script>
  <style scoped>
.scroll-view {
  overflow: auto;
  overflow-y: scroll;
}
</style>